<!DOCTYPE html>
<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/video.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/video-js.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/video.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
</head>

<body>

<div class="fixed-grid">

    <div class="grid">


        {%for r in data["li"] %}
        <div class="cell">
            <h5>{{r.title}}</h5>
            <video id="{{r.id}}" class="video-js vjs-big-play-centered vjs-theme-sea" controls muted width="600"
                   height="400"></video>
        </div>
        {%endfor %}
    </div>
</div>

<script>

    let data={{data | safe}}
    function run(id, ssrc) {

           url = `${data['host']}/${ssrc}/live/index.m3u8`
           console.log(id,url)

           var player = videojs(id);
           player.src({
                  src: url,
                  type: 'application/x-mpegURL',
           })
           player.autoplay('muted');
    }
    for (let v of data["li"] ){
        run(v.id,v.ssrc)
    }


</script>

</body>

</html>